<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
			
		<title>Enlargement</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        
		<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
		<link rel="stylesheet" href="css/custom.css" />
		<link rel="stylesheet" href="css/app.css" />
		<link rel="stylesheet" href="css/fonts.css" />
		
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/cordova-2.9.0.js"></script>
	    <script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/library.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/common.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/localize.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/jquery.cookie.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/jquery.runner-min.js"></script>
    	<script type="text/javascript" charset="utf-8">
		 	    	
    	
	    	$(document).on("pagebeforeshow", "#summary",function(event){
		 		//alert(1);
		 		//window.location.href="sendEmail.html?id=apartment";
		 		document.addEventListener("deviceready", onDeviceReady, true); 
		 	});
	 		
			function onDeviceReady() {
		        excecuteLocalization(["summary","global"]);
		        
				db = openDatabase(shortName, version, displayName,maxSize);
		 		
		 		db.transaction(populateDB, errorCB);
		 		window.setTimeout("showData()", 1000);
		    }
		 	
		 	
		 	/***********************************************************************/
		 	
		    function populateDB(tx) {
		    	//tx.executeSql('drop table excercises',[],nullHandler,errorCB);
		        tx.executeSql('CREATE TABLE IF NOT EXISTS excercises (id INTEGER PRIMARY KEY AUTOINCREMENT, excercise TEXT NOT NULL, datetime TEXT NOT NULL, timer TEXT NOT NULL, length TEXT)',[],nullHandler,errorCB);		    
		    }
		 
		   	function errorCB(transaction, error) {
		    	   alert('Error: ' + error.message + ' code: ' + error.code);
		    }
		    
		    function nullHandler(){};
		    
		    
		    /***********************************************************************/
		 	
		 	function showData(){		 		
		 		db.transaction(function(tx){
		 			tx.executeSql('SELECT * FROM excercises ORDER BY id DESC',[],function(tx,result){
			        	var dataset = result.rows;
			        	var node;
		 				//alert(dataset.length);
			        	for (var i = 0, item = null; i < dataset.length; i++) {
			                item = dataset.item(i);
			                //alert("excercise: " + item['excercise'] + ", datetime: " + item['datetime'] + ", timer: " + item['timer'] + ", length: " + item['length']);
			                node = createNewNode(item['excercise'], item['datetime'], item['timer'], item['length']);
			                //alert(node);
			                $('#contentSection').append(node);
			            }
			        },errorCB);
		 		},errorCB);
		 	}		 	
		 	
		 	function createNewNode(excercise, datetime, timer, length){		 		
		 		timer = timer / 1000;//timer comes in milliseconds
		 		var html = '';		 		
		 		html += '<article>';
		 		html += '<p>';
		 		html += '<b>' + $('#exerciseTag').html() + ':</b> ' + getExcercise(excercise) + "<br>";
		 		html += '<b>' + $('#datetimeTag').html() + ':</b> ' + datetime + "<br>";
		 		html += '<b>' + $('#timerTag').html() + ':</b> ' + timer + "<br>";
		 		html += '<b>' + $('#lengthTag').html() + ':</b> ' + length + "<br>";
		 		html += '</p>';
		 		html += '</article>';		 		
		 		return html;		 		
		 	}
		 	
		 	function getExcercise(id){
		 		return $('#excercise_' + id + 'Tag').html();
		 	}
	 					
		</script>
		<style>
			.nav-search .ui-btn-up-a {
				background-image:none;
				background-color:#333333;
			}
			.nav-search .ui-btn-inner {
				border-top: 1px solid #888;
				border-color: rgba(255, 255, 255, .1);
			}
			
			section{
				float: left;
				width: 100%;
				height: auto;
				font-size: 14px;
				font-family: Verdana, Geneva, sans-serif;
				color: #333;
			}
			article{
				width: 96%;
				float: left;
				padding: 2%;
				border: 2px solid #8DC2DC;
				margin-top: 10px;
				border-radius: 5px;
				background-color: #B6D8E8;
				color: #333;
				text-align: left;
			}
		</style>
	</head>
<body style="text-align:center;">

<div  data-role="page" style="display:none;" id="summary"> 
	
	<div data-role="panel" data-position="right" data-position-fixed="false" data-display="overlay" id="menu-panel" data-theme="a">

		<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
			<li data-icon="delete" style="background-color:#111;">
				<a href="#header" data-rel="close"><span data-translate="localize">global.close_menu</span></a>
			</li>
			<li>
				<a href="javascript:backToHome();"><span data-translate="localize">global.go_home</span></a>
			</li>
			<li>
				<a href="javascript:window.location.href='settings.html'"><span data-translate="localize">global.settings</span></a>
			</li>
			<li>
				<a href="javascript:exitAPP();"><span data-translate="localize">global.exit</span></a>
			</li>
		</ul>
		<span data-translate="localize" id="confirm_msgTag" style="display:none;">global.confirm_msg</span>
	</div>

	<div  data-role="header" id="header"  data-position="fixed">
		<img border="0" src="images/img-logo.jpg" alt="Logo" height="35" width="35" style="float:left; display:inline"/>
		<a href="javascript:openMenu();" data-icon="gear" class="ui-btn-right" id="openMenuButton"><span data-translate="localize">global.menu</span></a>
	</div> 
	
	<div  data-role="content">
		<table style="width: 100%">
			<tr><td></td></tr>
			<tr>
				<td>
					<span data-translate="localize">summary</span><br><br>
				</td>
			</tr>
			<tr>
				<td>
					<section id='contentSection'></section>
				</td>
			</tr>
		</table>
	</div> 
	<span data-translate="localize" id="exerciseTag" style="display:none;">excercise</span>
	<span data-translate="localize" id="timerTag" style="display:none;">timer</span>
	<span data-translate="localize" id="datetimeTag" style="display:none;">datetime</span>
	<span data-translate="localize" id="lengthTag" style="display:none;">length</span>
	<span data-translate="localize" id="excercise_1Tag" style="display:none;">excercise_1</span>
	<span data-translate="localize" id="excercise_2Tag" style="display:none;">excercise_2</span>
	<!-- 
	<div  data-role="footer" data-position="fixed">
		<button class="button-main-small" onclick="exitAPP();"><span data-translate="localize">global.exit</span></button>
	</div>
	-->
</div>
</body>
</html>